import React, { Component } from 'react';
import { Balloon, Tag } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import { YunxiaoTable } from '@alife/devops-ui';
import ListLoading from 'atComponents/ListLoading';
import ListEmpty from 'atComponents/ListEmpty';
import dayjs from 'dayjs';
import intl from '../../../../../../../../../locale';

export default class MirrorTable extends Component {
  componentDidMount() {
    this.props.getMirrorSyncList(1);
  }

  renderTime = (t) => {
    return dayjs(t).format('YYYY-MM-DD HH:mm:ss');
  };

  renderOperator = (o) => {
    return (
      <Balloon.Tooltip
        trigger={
          <div style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
            {o.name}
          </div>
        }
      >
        {o.name}
      </Balloon.Tooltip>
    );
  };

  renderStatus = (status) => {
    switch (status) {
      case 'SUCCESS':
        return (
          <Tag color="green">
            {intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Success',
              defaultMessage: '成功',
            })}
          </Tag>
        );
      case 'FAIL':
        return (
          <Tag color="red">
            {intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Failed',
              defaultMessage: '失败',
            })}
          </Tag>
        );
      case 'READY':
        return (
          <Tag>
            {intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.WaitingForSynchronization',
              defaultMessage: '同步中',
            })}
          </Tag>
        );
      case 'SYNCHRONIZING':
        return (
          <Tag>
            {intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Synchronizing',
              defaultMessage: '同步中',
            })}
          </Tag>
        );
      default:
        break;
    }
  };

  renderType = (type) => {
    return {
      MANUAL: intl.get({
        id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Manual',
        defaultMessage: '手动',
      }),
      AUTO: intl.get({
        id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Automatic',
        defaultMessage: '自动',
      }),
      API: 'API',
    }[type];
  };

  renderEvent = (message, index, data) => {
    const errMessage = data.sync_status === 'SUCCESS' ? '' : message;

    if (errMessage === '') {
      return errMessage;
    }

    return (
      <Balloon.Tooltip
        trigger={
          <div
            style={{
              width: 220,
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden',
            }}
          >
            {errMessage}
          </div>
        }
      >
        {errMessage}
      </Balloon.Tooltip>
    );
  };

  onPageNoChange = (page) => {
    this.props.getMirrorSyncList(page);
  };

  onPageSizeChange = (pageSize) => {
    this.props.updateData({
      pageSize,
    });

    this.props.getMirrorSyncList(1, pageSize);
  };

  renderMain = () => {
    const { tableListData, pageSize } = this.props;
    const { amount, list } = tableListData;
    return amount ? (
      <React.Fragment>
        <YunxiaoTable dataSource={list} hasBorder className="mirror-sync-container-table">
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Operator',
              defaultMessage: '操作人',
            })}
            className="webhook-url-width"
            dataIndex="operator"
            cell={this.renderOperator}
          />

          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.SynchronizationTime',
              defaultMessage: '同步时间',
            })}
            dataIndex="gmt_modified"
            cell={this.renderTime}
          />
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.State',
              defaultMessage: '状态',
            })}
            dataIndex="sync_status"
            cell={this.renderStatus}
          />
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.Description',
              defaultMessage: '说明',
            })}
            cell={this.renderEvent}
            dataIndex="message"
          />
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.settingsMirrorSync.containers.mirrorTable.SynchronizationMethod',
              defaultMessage: '同步方式',
            })}
            dataIndex="sync_type"
            cell={this.renderType}
          />
        </YunxiaoTable>
        <Pagination
          onChange={this.onPageNoChange}
          onPageSizeChange={this.onPageSizeChange}
          pageSize={pageSize}
          total={amount}
          footerProps={{
            style: { border: 'none' },
          }}
        />
      </React.Fragment>
    ) : (
      <ListEmpty
        type="card"
        size="small"
        content=""
        description={intl.get({
          id: 'code-assets.settingsMirrorSync.containers.mirrorTable.NoSynchronizationRecordsAreFound',
          defaultMessage: '暂无同步记录',
        })}
        image="none"
        className="no-content no-btns"
      />
    );
  };

  render() {
    const { isLoadingList } = this.props;
    return isLoadingList ? <ListLoading style={{ textAlign: 'center' }} /> : this.renderMain();
  }
}
